<template>
  <div class="app-container">
    <el-space direction="vertical" alignment="start">
      <div style="margin-bottom:15px;">
        当前角色: {{ roles }}
      </div>
      <div style="margin-bottom:15px;">
        切换角色:
        <el-radio-group v-model="switchRoles">
          <el-radio-button label="admin" />
          <el-radio-button label="editor" />
        </el-radio-group>
      </div>
      <div>
        <el-button type="primary" v-permission="['admin']">admin下显示</el-button>
        <el-button type="warning" v-permission="['admin', 'editor']">admin、editor都显示</el-button>
        <el-button type="success" v-permission="['editor']">editor下显示</el-button>
      </div>
    </el-space>
  </div>
</template>

<script setup lang="ts" name="permission-page">
import { useUserStore } from "@/store/user";

const $router = useRouter()

const userStore = useUserStore()
const roles: ComputedRef = computed(() => userStore.roles)
const switchRoles = computed({
  get() {
    return roles.value[0]
  },
  set(val) {
    userStore.changeRoles(val).then(() => {
      $router.push({ path: '/redirect/permission/directive' })
    })
  }
})


</script>

<style lang="scss" scoped>

</style>
